<template>
  <div v-for="song in GoodList.Songslist" :key="song.id" style="padding: 0 0.2rem ">
    <div style="display: flex;justify-content: space-between;align-items: center;height:1rem;margin-bottom: 0.2rem" @click="PlaySong(song)">
      <div>
        <img :src="song.al.picUrl" alt=""
             style="width: 0.8rem;height: 0.8rem;border-radius: 0.1rem">
      </div>
      <div style="flex: 1;padding: 0 0.1rem">
        <div style="font-size: 0.2rem">{{song.name}}</div>
        <div style="font-size: 0.15rem;padding-top: 0.1rem;color: rgb(0,0,0,0.6)">{{showName(song.ar)}}-{{song.name}}</div>
      </div>
      <svg class="icon" aria-hidden="true" style="font-size: 0.4rem;color: #e7efd8" >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon" aria-hidden="true" style="font-size: 0.4rem;color: #e7efd8;padding-left: 0.4rem">
        <use xlink:href="#icon-sangedian"></use>
      </svg>
    </div>
    </div>
</template>
<script>
import show from '../../hooks/userShowName'
import {reactive,ref} from "vue";
import store from "@/store";
export default {
  props:["GoodList"],
  name: "GoodsList",
  setup(){
    let showName=ref(show)

    const method={
      PlaySong(song){
        store.commit('sendID',song)
        store.commit('changeState')
      }
    }
    return {
      showName,
      ...method
    }
  }
}
</script>
<style scoped>
</style>